---
title: Despliega tu proyecto de Astro en Cloudflare Pages
description: Cómo desplegar tu proyecto de Astro usando Cloudflare Pages.
type: deploy
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro'

Puedes desplegar tu proyecto de Astro en [Cloudflare Pages](https://pages.cloudflare.com/), una plataforma para desarrolladores frontend para colaborar y desplegar sitios web estáticos (JAMstack) y con renderizado en el servidor (SSR).

Esta guía incluye:

- [Cómo desplegar a través del dashboard de Cloudflare Pages](#cómo-desplegar-un-proyecto-con-git)
- [Cómo desplegar usando Wrangler, la CLI de Cloudflare](#cómo-desplegar-un-proyecto-usando-wrangler)
- [Cómo desplegar un proyecto con SSR usando `@astrojs/cloudflare`](#cómo-desplegar-un-proyecto-con-ssr)

## Prerrequisitos

Para comenzar, necesitarás:

- Una cuenta de Cloudflare. Si no tienes una, puedes crear una cuenta gratuita de Cloudflare durante el proceso.
- Tu código alojado en un repositorio de [GitHub](https://github.com/) o [GitLab](https://about.gitlab.com/).

## Cómo desplegar un proyecto con Git

1. Crea un nuevo proyecto en Cloudflare Pages.
2. Sube tu código a un repositorio de git remoto (GitHub, GitLab).
3. Inicia sesión en el dashboard de Cloudflare y selecciona tu cuenta en **Inicio** > **Páginas**.
4. Selecciona **Crear un proyecto** y la opción de **Conéctese a un Git**.
5. Selecciona el proyecto de git que quieres desplegar y haz clic en **Comenzar la instalación**
6. Usa los siguientes ajustes de compilación:

    - **Valor preestablecido del marco**: `Astro`
    - **Comando de compilación:** `npm run build`
    - **Crear directorio de salida:** `dist`

7. Haz clic en el botón **Guardar e implementar**.

## Cómo desplegar un proyecto usando Wrangler

1. Instala [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/get-started/).
2. Accede en Wrangler con tu cuenta de Cloudflare usando `wrangler login`.
3. Ejecuta tu comando de compilación.
4. Despliega usando `npx wrangler pages deploy dist`.

```bash
# Instala Wrangler CLI
npm install -g wrangler
# Accede a tu cuenta de Cloudflare desde la CLI
wrangler login
# Ejecuta el comando de compilación
npm run build
# Crea un nuevo despliegue
npx wrangler pages deploy dist
```

Una vez que tus archivos sean subidos, Wrangler te dará una preview URL para inspeccionar tu sitio. Cuando accedas al dashboard de Cloudflare Pages, verás tu nuevo proyecto.

### Habilitando Preview localmente con Wrangler

Para que preview funcione, debes instalar `wrangler`

```bash
pnpm add wrangler --save-dev
```

Entonces será posible actualizar el script preview para ejecutar `wrangler` en lugar del comando preview ya integrado en Astro:

```json title="package.json"
"preview": "wrangler pages dev ./dist"
```

## Cómo desplegar un proyecto con SSR

Puedes construir un proyecto de Astro con SSR para desplegarlo en Cloudflare Pages usando el [adaptador `@astrojs/cloudflare`](/es/guides/integrations-guide/cloudflare/).

Sigue los pasos a continuación para configurar el adaptador. Puedes desplegar usando cualquiera de las opciones mencionadas anteriormente.

### Instalación rápida

Añade el adaptador de Cloudflare que activa SSR en tu proyecto de Astro con el siguiente comando `astro add` que se muestra debajo. Este instalará el adaptador y hará los cambios apropiados a tu archivo `astro.config.mjs` en un solo paso.

```bash
npx astro add cloudflare
```
### Instalación manual

Si prefieres instalar el adaptador manualmente, sigue los siguientes pasos:


1. Añadir el adaptador `@astrojs/cloudflare` a las dependencias de tu proyecto usando tu gestor de paquetes preferido. Si estás usando npm o no estás seguro, ejecuta esto en la terminal:


    ```bash
    npm install @astrojs/cloudflare
    ```

2. Añadir lo siguiente a tu archivo `astro.config.mjs`:

    ```js title="astro.config.mjs" ins={2, 5-6}
    import { defineConfig } from 'astro/config';
    import cloudflare from '@astrojs/cloudflare';

    export default defineConfig({
      output: 'server',
      adapter: cloudflare()
    });
    ```

### Modos

Actualmente existen dos modos soportados cuando utilizas Pages Functions con el adaptador [`@astrojs/cloudflare`](https://github.com/withastro/astro/tree/main/packages/integrations/cloudflare#readme).

1. Modo **Advanced**: Este modo es usado cuando deseas ejecutar tu función en modo `advanced` el cual toma el archivo `_worker.js` en `dist`, o un modo directorio donde las páginas compilarán el worker fuera de un directorio de funciones en la raíz de tu proyecto.

    Si no hay modo establecido, por defecto será `"advanced"`.

2. Modo **directory**: Este modo es usado cuando deseas ejecutar tu función en modo `directory`, lo que significa que el adaptador compilará la parte del cliente de tu app del mismo modo, pero moverá el script de worker dentro de un directorio `functions` en la raíz de tu proyecto. El adaptador solo colocará un `[[path]].js` en ese directorio, permitiéndote añadir plugins adicionales y middleware que se puede verificar en el control de versiones.

    ```ts title="astro.config.mjs" "directory"
    export default defineConfig({
      adapter: cloudflare({ mode: "directory" }),
    });
    ```
### Usando Pages Functions

[Pages Functions](https://developers.cloudflare.com/pages/platform/functions/) te permiten ejecutar código en el servidor para habilitar funcionalidades dinámicas sin ejecutar un servidor dedicado.

Para comenzar, crea un directorio `/functions` en la raíz de tu proyecto. Al escribir tus archivos de funciones en este directorio generará de forma automática un Worker con funcionalidad personalizada en las rutas previamente designadas. Para aprender más sobre las funciones, consulta la [documentación de Pages Functions](https://developers.cloudflare.com/pages/platform/functions/).

<ReadMore>Aprende más sobre [SSR en Astro](/es/guides/server-side-rendering/).</ReadMore>

## Solución de problemas

Si encuentras errores, vuelve a verificar que la versión de `node` que estás usando localmente (`node -v`) coincida con la versión que estás especificando en la variable de entorno.

Cloudflare requiere [Node v16.13](https://miniflare.dev/get-started/cli#installation), la cual es una versión más reciente que el mínimo por defecto de Astro, así que verifica que estés usando al menos v16.13.

La hidratación del lado del cliente puede fallar como resultado de la configuración de Auto Minify de Cloudflare. Si ves `Hydration completed but contains mismatches` en la consola, asegúrate de deshabilitar Auto Minify en la configuración de Cloudflare.

Si estás construyendo un proyecto que está usando renderizado bajo demanda con [el Adaptador de SSR de Cloudflare](/es/guides/integrations-guide/cloudflare/) y el servidor falla en construir con un mensaje de error como `[Error] Could not resolve "XXXX. The package "XXXX" wasn't found on the file system but is built into node.`:

- Esto significa que un paquete o importación que estás utilizando en el entorno del lado del servidor no es compatible con las [APIs de tiempo de ejecución de los Cloudflare Workers](https://developers.cloudflare.com/workers/runtime-apis/nodejs/).

- Si estás importando directamente una API de tiempo de ejecución de Node.js, por favor consulta la documentación de Astro en [compatibilidad con Node.js](/es/guides/integrations-guide/cloudflare/#compatibilidad-con-nodejs) de Cloudflare para conocer los pasos adicionales sobre como resolver esto.

- Si estás importando un paquete que importa una API de tiempo de ejecución de Node.js, verifica con el autor del paquete si admiten la sintaxis de importación `node:*`. Si no lo hacen, es posible que necesites encontrar un paquete alternativo o utilizar un adaptador diferente.